<template>
  <div class="Rankingcp">
    <van-nav-bar v-if="showNav" title="排行榜" left-text="返回" left-arrow @click-left="back" />
    <van-tabs line-width="30px" title-active-color="#5c55ff" title-inactive-color="#333" color="#5c55ff"
      @click="switchList">
      <van-tab v-for="(item, index) in rankData" :title="item.name" :key="index">
        <div class="rank-box">
          <div class="rank-title">
            <h2>{{ title }}</h2>
            <span>{{ description }}</span>
          </div>
          <div class="rank-item">
            <div class="rank-content" v-for="(item, index) in rankTypeData" :key="index"
              @click="linkToDetail(item.comic_id)">
              <div class="rank-left">
                <img v-lazy="item.vertical_cover" alt />
                <div class="hot">热度:{{ item.fans }}</div>
              </div>
              <div class="rank-right">
                <h2>{{ item.title }}</h2>
                <div class="item-content">
                  <p v-if="item.author.length===1">{{ item.author[0]}}</p>
                  <p v-else>{{ item.author[0]}},{{  item.author[1] }}</p>
                  <p v-for="(v, i) in item.styles" :key="i">类型：{{ v.name }}</p>
                  <p>{{ item.is_finish === 0 ? '更新至' + item.last_short_title + '话' : '共' + item.total + "话完结" }} </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getRank, getRankType } from "@/api/api";
export default {
  name: "Rankingcp",
  data() {
    return {
      rankData: [],
      title: "",
      description: "",
      rankTypeData: []
    };
  },
  props: {
    showNav: {
      type: Boolean,
      default: true
    }
  },
  created() {
    getRank()
      .then(res => {
        this.rankData = res.data.data.list;
      })
      .catch(err => {
        console.log(err);
      });
    //默认获取排行榜第一项信息
    getRankType(7)
      .then(res => {
        //获取标题
        this.title = res.data.data.title;
        //获取标题内容
        this.description = res.data.data.description;
        //获取详情信息
        this.rankTypeData = res.data.data.list;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    back() {
      let path = this.$route.query.path;
      this.$router.push(path);
    },
    //切换榜单
    switchList(index) {
      let id = this.rankData[index].id;
      //获取不同类型的排行榜信息
      getRankType(id)
        .then(res => {
          //获取标题
          this.title = res.data.data.title;
          //获取标题内容
          this.description = res.data.data.description;
          //获取详情信息
          this.rankTypeData = res.data.data.list;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取漫画小说的id跳转到详情页
    linkToDetail(id) {
      let path = "/detail";
      this.$router.push({
        path,
        query: { comicId: id, path: this.$route.fullPath }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.Rankingcp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  ::v-deep .van-nav-bar__title {
    color: #333;
    font-size: 18px;
    font-weight: bold;
  }

  ::v-deep .van-nav-bar__text,
  ::v-deep .van-nav-bar .van-icon {
    color: #777;
    font-size: 14px;
  }

  .rank-box {
    height: 100vh;
    margin: 0 10px;
    overflow-y: auto;

    .rank-title {
      display: flex;
      align-items: center;

      span {
        color: #aaa;
        margin-left: 10px;
      }
    }

    .rank-item {
      &:last-child {
        margin-bottom: 100px;
      }

      .rank-content {
        display: flex;
        margin-bottom: 20px;
        box-sizing: border-box;

        .rank-left {
          width: 100px;
          height: 120px;
          position: relative;

          img {
            height: 100%;
          }

          .hot {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(0, 0, 0, 0.8);
            color: #ff3f3f;
          }
        }

        .rank-right {
          width: 100%;
          height: 120px;
          padding: 2px 5px;
          background: #f1f1f1;
          box-sizing: border-box;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          h2 {
            width: 255px;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          p {
            width: 225px;
            font-size: 13px;
            margin:0 10px 4px 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>